<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" 
				xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="UTF-8" />
<title>看板配置信息列表</title>
<script type="text/javascript" th:src="@{/js/pollingConfig/list.js}"></script>
</head>
<body>
	 <div id="pageDiv">
	 
	 	<div>
	    	<el-breadcrumb separator-class="el-icon-arrow-right">
			  <el-breadcrumb-item>播放列表</el-breadcrumb-item>
			  <el-breadcrumb-item>看板配置</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<br/>
		<!-- 新增看板配置 -->
		<div>
			<template>
				<el-dialog title="新增看板配置" :visible.sync="dialogAdd" width="30%">
				    <el-form :inline="false" :model="pollingConfigAdd" ref="pollingConfigAdd" label-position="right" size="small" :rules="rules">
						  <el-form-item label="看板位置" prop="kanbanPoition">
						  	<el-col :span="18">
						    	<el-input v-model="pollingConfigAdd.kanbanPoition" placeholder="看板位置"></el-input>
						    </el-col>
						  </el-form-item>
						  <el-form-item label="看板对应url" prop="kanbanUrl">
						  	<el-col :span="17">
						       <el-input v-model="pollingConfigAdd.kanbanUrl" placeholder="看板对应url"></el-input>
						     </el-col>
						  </el-form-item>
						  <el-form-item label="设备编号" prop="deviceId">
						  	 <el-col :span="18">
						       <el-input v-model="pollingConfigAdd.deviceId" placeholder="输入设备编号，请用英文【,】隔开"></el-input>
						     </el-col>
						  </el-form-item>
					</el-form> 
					<span slot="footer" class="dialog-footer">
					    <el-button size="mini" type="primary" @click="addForm('pollingConfigAdd')">确定</el-button>
					    <el-button size="mini" type="primary" @click="closeDialog()">取消</el-button>
					</span>
				</el-dialog>
				<span shiro:hasRole="developer" >
					<el-button size="small" type="primary" @click="openAddDialog()">增加配置</el-button>
				</span>
			</template>
		</div>
		<!-- 新增看板配置 -->
		
		<br/>
		
		<!-- 看板配置列表 -->
		<div>
			<template>
				<!-- 表格 -->
				<el-table  v-loading="loading" :data="tableData" height="410"  style="width: 100%">
				    <el-table-column prop="kanbanPoition" label="看板位置" width="350"></el-table-column>
				    <el-table-column prop="kanbanUrl" label="看板对应url" width="250"></el-table-column>
				    <el-table-column label="编辑配置详情">
				      <template slot-scope="scope">
						<el-button size="mini" type="primary" plain @click="getPollingData(scope.row)">修改</el-button>
				        <el-button size="mini" type="primary" plain @click="openTabById('/config/toConfigListByPoolingConfigId?id=',scope.row.id)">看板详细配置</el-button>
				        <el-button size="mini" type="primary" plain @click="fontSizeConfig(scope.row)">看板字号配置</el-button>
				        <el-button size="mini" type="danger" plain @click.native.prevent="deleteConfig(scope.$index, scope.row,tableData)"> 删除</el-button> 
				      </template>
				    </el-table-column>
				</el-table>
				<!-- 分页 -->
		    	<el-pagination 
		    		background
		    		@size-change="handleSizeChange" 
		    		@current-change="handleCurrentChange" 
		    		:current-page="currentPage"  
		    		:page-sizes="[3,5,10]" 
		    		:page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" 
		    		:total="totalSize">
    			</el-pagination>
    			<!-- 使用dialog方式 -->
				<el-dialog :title="dialogTitle" :visible.sync="dialogEdit"  width="30%">
				    <el-form :inline="false" :model="pollingConfig" label-position="right" size="small">
						  <el-form-item label="看板位置">
						 	 <el-col :span="18">
						   		 <el-input v-model="pollingConfig.kanbanPoition" placeholder="看板位置"></el-input>
						   	 </el-col>
						  </el-form-item>
						  <el-form-item label="看板对应url">
						  	  <el-col :span="17">
						    	  <el-input v-model="pollingConfig.kanbanUrl" placeholder="看板对应url" :disabled="true"></el-input>
						      </el-col>
						  </el-form-item>
						  
						  <el-form-item label="设备编号">
						  	  <el-col :span="18">
						    	  <el-input v-model="pollingConfig.deviceId" placeholder="输入设备编号，请用英文【,】隔开" ></el-input>
						      </el-col>
						  </el-form-item>
					</el-form> 
					<div style="text-align: right; margin: 0">
					    <el-button size="mini" type="primary" @click="editForm()">确定</el-button>
					    <el-button size="mini" type="primary" @click="closeDialog()">取消</el-button>
					</div>
				</el-dialog>
				
				<!-- 使用dialog方式 -->
				<el-dialog :title="dialogFontSizeTitle" :visible.sync="dialogFontSizeConfig"  width="30%">
				    <el-form :inline="false" :model="pollingConfig" label-position="right" size="small">
						  <el-form-item label="看板标题字体大小">
						 	 <el-col :span="15">
						   		 <el-input v-model="pollingConfig.headFontSize" placeholder="标题字体大小"></el-input>
						   	 </el-col>
						  </el-form-item>
						  <el-form-item label="表格表头字体大小">
						  	  <el-col :span="14">
						    	  <el-input v-model="pollingConfig.thFontSize" placeholder="表格表头字体大小"></el-input>
						      </el-col>
						  </el-form-item>
						  <el-form-item label="表格内容字体大小">
						  	  <el-col :span="14">
						    	  <el-input v-model="pollingConfig.tdFontSize" placeholder="表格内容字体大小"></el-input>
						      </el-col>
						  </el-form-item>
					</el-form> 
					<div style="text-align: right; margin: 0">
					    <el-button size="mini" type="primary" @click="editForm()">确定</el-button>
					    <el-button size="mini" type="primary" @click="closeDialog()">取消</el-button>
					</div>
				</el-dialog>
				
			</template>
		</div>
		<!-- 看板配置列表 -->
		
	</div>
</body>
</html>